<template>
  <qf-card
    className="userCreate"
    title="用户列表"
    btnTitle="创建"
    btnUrl="/user/create"
  >
    <!-- 筛选 -->
    <template #filter>
      <el-input
        style="width: 300px"
        placeholder="请输入内容"
        class="input-with-select"
        v-model="params.uname"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="handleSearch"
        ></el-button>
      </el-input>

      <el-date-picker
        v-model="params.date"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </template>
    <!-- 筛选 -->

    <!-- 表格 -->
    <qf-table :tableData="tableData" :columns="columns"></qf-table>
    <!-- 表格 -->

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.pagenum"
      :page-sizes="[params.pagesize, 30, 30, 40]"
      :page-size="params.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableDataTotal"
    >
    </el-pagination>
    <!-- 分页 -->

    <!-- 页面组件 -->
    <editUser ref="editUserRef" :handleTableData="handleTableData" />
    <assignRole ref="assignRoleRef" :handleTableData="handleTableData" />
    <!-- 页面组件 -->
  </qf-card>
</template>

<script>
import { getUserApi, deleteUserApi, putUserStateApi } from "@/api/user";

// import tableData from "~mock/users/index.js";
// console.log("mock数据：", tableData.data);
// console.log("mock数据：", tableData.data);
// console.log("mock数据：", tableData.data);
// console.log("mock数据：", tableData.data);

export default {
  components: {
    editUser: () => import("./components/editUser.vue"),
    assignRole: () => import("./components/assignRole.vue"),
  },
  methods: {
    handleSearch() {
      this.params.pagenum = 1;
      this.handleTableData();
    },
    handelDel() {
      this.confirm(() => {
        alert("确定等待后期逻辑处理");
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.pagenum = 1;
      this.params.pagesize = val;
      this.handleTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.pagenum = val;
      this.handleTableData();
    },
    async handleTableData() {
      const res = await getUserApi(this.params);
      this.tableData = res.data.list;
      this.tableDataTotal = parseInt(res.data.total);
    },
  },
  created() {
    this.handleTableData();
  },
  watch: {
    "params.date"(newData) {
      this.params.start_time = newData ? newData[0] : "";
      this.params.end_time = newData ? newData[1] : "";
      this.params.pagenum = 1;
      this.handleTableData();
    },
  },
  data() {
    return {
      params: {
        date: [],
        pagenum: 1,
        pagesize: 5,
        uname: "",
        start_time: "",
        end_time: "",
      },

      // tableData: tableData.data,
      tableData: [],
      tableDataTotal: 0,

      columns: [
        { title: "编号", field: "user_id" },
        { title: "所属角色", field: "role_name" },
        { title: "用户名", field: "username" },
        {
          title: "冻结",
          field: "state",
          type: "switch",
          payload: {
            // state 1 没冻结，0 冻结了
            open: "1",
            close: "0",
            change: async (row) => {
              const res = await putUserStateApi(row);
              if (res.meta.state === 200) {
                this.$message.success(res.meta.msg);
              } else {
                this.$message.error(res.meta.msg);
              }
            },
          },
        },
        { title: "创建于", field: "create_time" },
        {
          title: "操作",
          width: 280,
          fixed: "right",
          type: "btn",
          payload: [
            {
              name: "修改用户",
              type: "primary",
              click: (row) => {
                console.log("修改", row);
                this.$refs.editUserRef.status = true;
                row.question = row.passwd_question;
                row.answer = row.passwd_answer;
                this.$refs.editUserRef.row = row;
              },
            },
            {
              name: "分配角色",
              type: "success",
              click: (row) => {
                console.log("分配角色", row);
                this.$refs.assignRoleRef.status = true;
                this.$refs.assignRoleRef.row = row;
              },
            },
            {
              name: "删除",
              type: "danger",
              click: (row) => {
                this.confirm(async () => {
                  // console.log("删除", row);
                  // const res = await deleteUserApi({user_id: row.user_id})
                  const res = await deleteUserApi(row);
                  if (res.meta.state === 200) {
                    this.$message.success(res.meta.msg);
                    this.handleTableData();
                  } else {
                    this.$message.error(res.meta.msg);
                  }
                });
                // ...
              },
            },
          ],
        },
      ],
      // ...
    };
  },
};
</script>
